<template>
    <div class="login">
  <div>
        <van-nav-bar left-text="取消" left-arrow @click-left="$router.back()" />
    </div>
    <div style="margin-top: 1rem;margin-left: 2rem; width: 83%;">
        <h2 style="line-height: 6rem;">登录春雨医生</h2>

        <div v-if="show">
            <div style="border-bottom: 1px solid #ccc;  width: 90%;">+86
                <input type="text" placeholder="请输入手机号" v-model="phone"
                    style="border: none;margin-bottom: .5rem;text-indent: 1rem; width: 83%;">
            </div>
            <!-- 协议 -->
            <div style="margin-top: 2.5rem;" @click="allcheck">
                <van-checkbox v-model="checked" checked-color="#07c160" name="a">我已阅读并同意<span
                        style="color:#07c160">《春雨医生用户协议》《隐私政策》</span>，未注册将自动完成账户注册
                </van-checkbox>
            </div>
            <van-button color="#07c160" style="width: 100%;margin-top: 2rem;" @click='PhoneLogin'>
                <h3>获取短信验证码</h3>
            </van-button>
            <div style="text-align: right; line-height: 3rem;" @click="show = false" >
                密码登录
            </div>
        </div>
        <div v-else>
            <div style="border-bottom: 1px solid #ccc;  width: 90%;">+86
                <input type="usename" placeholder="请输入手机号或用户名" v-model="username"
                    style="border: none;margin-bottom: .5rem;text-indent: 1rem; width: 83%;">
            </div>
            <div style="border-bottom: 1px solid #ccc;  width: 90%;margin-top: 1.5rem;">
                <input type="password" placeholder="请输入密码" v-model="password"
                    style="border: none;margin-bottom: .5rem;text-indent: 1rem; width: 83%;">
            </div>
            <div style="margin-top: 2.5rem;" @click="allcheck">
                <van-checkbox v-model="checked" checked-color="#07c160" name="a">我已阅读并同意<span
                        style="color:#07c160">《春雨医生用户协议》《隐私政策》</span>，未注册将自动完成账户注册
                </van-checkbox>
            </div>
            
            <van-button color="#07c160" style="width: 100%;margin-top: 2rem;" @click="UserLogin">
                <h3>登录</h3>
            </van-button>
            <div style="line-height: 3rem;">
                <div style="float: left;">
                    忘记密码
                </div>
                <div style="text-align: right;" @click="show = true">验证码登录</div>
            </div>
            <div style="clear: both;"></div>
        </div>

        <div class="botton">
            <div>
                <img style="width: 5rem;" src="@/assets/1.gif" alt="">
            </div>
            <div>
                <a
                    href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=100298602&redirect_uri=http%3A//chunyuyisheng.com/third/qq_oauth/%3Fnext%3Dhttps%253A%252F%252Fm.chunyuyisheng.com%252Fm%252Fuser_home%252F%253Fpartner%253Dchunyu_m%26source%3Dchunyu_wap&scope=get_info">
                    <img style="width: 6.5rem;background: #f5f5f5" src="@/assets/2.gif" alt="">
                </a>

            </div>
            <div>
                <a
                    href="https://api.weibo.com/oauth2/authorize?redirect_uri=http%3A//chunyuyisheng.com/third/weibo_oauth/%3Fnext%3Dhttps%253A%252F%252Fm.chunyuyisheng.com%252Fm%252Fuser_home%252F%253Fpartner%253Dchunyu_m%26source%3Dchunyu_wap&response_type=code&client_id=2951738556&display=default">
                    <img style="width: 5rem;background: #f5f5f5" src="@/assets/3.gif" alt="">
                </a>
            </div>
        </div>
    </div>
    </div>
  

</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';
const checked = ref(true);
const router = useRouter();
const QWq = ref([
    {
        image: "@/assets/1.gif",
        title: "微信"
    },
    {
        image: "@/assets/2.gif",
        title: "QQ"
    },
    {
        image: "@/assets/3.gif",
        title: "微博"
    }
])

const username = ref('');
const password = ref('')
const show = ref(false)
var phone = ref('')
const allcheck = () => {
    checked.value != checked.value
}
const PhoneLogin = () => {
    if (!phone.value) {
        alert('请输入手机号')
        return
    }
    if (!checked.value) {
        alert('请勾选同意协议')
        return
    }
    router.push({
        path: '/code',
        query: {
            phone: phone.value
        }
    })
}
const UserLogin = async () => {
    console.log(username.value);
    console.log(password.value);
    if (!username.value || !password.value) {
        alert('请输入用户名和密码')
        return
    }
    if (!checked.value) {
        alert('请勾选同意协议')
        return
    }
    var res = await axios.post('/api/login', { username: username.value, password: password.value })
    console.log(res);

    if (res.data.code == 200) {
        alert('登录成功')
        localStorage.setItem('token', res.data.data.accessToken)
        localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
        window.location.href = '/yd'
    } else {
        alert('用户名或密码错误')
    }
}

</script>

<style scoped>
.login{
    width: 100%;
    height: 100%;
   background-color: #fff;
}
.botton {
    width: 85%;
    height: 4rem;
    /* background-color: aqua; */
    position: fixed;
    bottom: 2rem;
    display: flex;
}

.botton div {
    flex: 1;
    text-align: center;
    line-height: 4rem;
}
</style>
